<template>
    <div class="fillcontain">
        <el-form :inline="true" ref="form" :model="form" label-width="80px">
            <el-form-item label="手机号">
                <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <!-- <el-form-item label="发卡机构">
    <el-select v-model="form.cardUnitId" placeholder="请选择">
      <el-option label="佳惠" value="0"></el-option>
    </el-select>
  </el-form-item> -->
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <div class="table_container">
            <el-table :data="tableData" highlight-current-row @row-click="dialogFn($event)" style="width: 100%">
                <el-table-column type="index" width="100">
                </el-table-column>
                <el-table-column property="hyId" label="会员ID" width="160">
                </el-table-column>
                <el-table-column property="name" label="姓名" width="160">
                </el-table-column>
                <el-table-column property="phone" label="手机号" width="160">
                </el-table-column>
                <el-table-column property="accountId" label="账户ID" width="160">
                </el-table-column>
                <el-table-column property="cardUnitId" label="发卡机构" width="160">
                </el-table-column>
                <el-table-column property="je" label="余额" width="160">
                </el-table-column>
                <el-table-column property="statusText" label="状态">
                </el-table-column>
                
            </el-table>
            <!-- <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-size="10"
                  layout="total, prev, pager, next"
                  :total="count">
                </el-pagination>
            </div> -->
        </div>
        <el-pagination background layout="prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="form.pageSize" :total="form.totalCount">
        </el-pagination>
        <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> -->

        <el-dialog :title="formDialog.customerNo" :visible.sync="dialogVisible" width="80%" :before-close="handleClose">
            <div class="table_container ">
                <el-table :border="true" :data="tableDataDialog" highlight-current-row style="width: 100%">
                    <!-- <el-table-column type="index" width="50">
                    </el-table-column> -->
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <!-- <el-form-item label="商品名称">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="所属店铺">
            <span>{{ props.row.shop }}</span>
          </el-form-item> -->

                                <el-form-item label="会员ID"  >
                                    {{ props.row.memberId }}
                                </el-form-item>
                                <el-form-item property="cardUnitName" label="发卡机构"  >
                                    {{ props.row.cardUnitName }}
                                </el-form-item>
                                <el-form-item property="cardUnitId" label="发卡机构ID">
                                    {{ props.row.cardUnitId }}
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column property="id" label="ID" width="">
                    </el-table-column>
                    <el-table-column property="createDate" label="交易时间" width="160">
                    </el-table-column>
                    <el-table-column property="sheetTypeName" label="交易类型" min-width="130">
                    </el-table-column>
                    <el-table-column property="je" align="right" label="交易金额">
                    </el-table-column>
                    <el-table-column property="frozeJe" align="right" label="冻结金额" min-width="100">
                    </el-table-column>
                    <el-table-column property="beforeJe" align="right" label="交易前金额" min-width="100">
                    </el-table-column>
                    <el-table-column property="afterJe" align="right" label="交易后金额" min-width="100">
                    </el-table-column>

                </el-table>

                <el-pagination style="margin-top:10px;" background layout="prev, pager, next" @size-change="handleSizeChangeDialog" @current-change="handleCurrentChangeDialog" :page-size="formDialog.pageSize" :total="formDialog.totalCount">
                </el-pagination>
                <!-- <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-size="10"
                  layout="total, prev, pager, next"
                  :total="count">
                </el-pagination>
            </div> -->
            </div>
            <!-- <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span> -->
        </el-dialog>
    </div>
</template>


<script>
import headTop from '../components/headTop'
import { getUserList, getUserCount } from '@/api/getData'
import { getCustomers, getAllAccountPage, getTradeInfoList } from '@/api/getData'
import { getStore } from '@/config/mUtils'
export default {
    data () {
        return {
            dialogVisible: false,
            form: {
                phone: '',
                cardUnitId: '0',
                pageSize: 10,
                totalCount: 0,
                totalPage: 1,
                pageNum: 1

            },
            formDialog: {
                customerNo: '',
                cardUnitId: '0',
                pageSize: 10,
                totalCount: 0,
                totalPage: 1,
                pageNum: 1

            },
            unitArr: ['佳惠'],
            czlxArr: ['冻结', '解冻'],
            statusArr: ['正常', '冻结'],
            //             "je": 储值卡金额,
            //   "name": "姓名",
            //   "phone": "手机号",
            //   "hyId": "会员ID",
            //   "accountId": 账户ID,
            //   "cardUnitId": 发卡机构ID
            tableDataDialog: [
                //         "id": 54,						//记录ID
                // "createDate": "2018-07-19 14:54:44",//交易时间
                // "accountId": 3,				//储值卡帐户ID
                // "memberId": 34532,			//会员ID
                // "cardUnitId": 0,				//发卡机构ID
                // "cardUnitName": "佳惠",		//发卡机构名称 
                // "sheetType": 101,			//交易类型。（具体编码见后面）
                //  “sheetTypeName”:” 账户充值”, //交易类型名称
                // "direction": 1,	//资金方向。-1减少，1：增加，2：冻结
                // "je": 2000, //交易金额
                // "frozeJe": 0,//冻结金额
                // "beforeJe": 0,//交易前金额
                // "afterJe": 2000 //交易后金额
            ],
            tableData: [
                //     {
                // //   registe_time: '2016-05-02',
                // //   username: '王小虎',
                // //   city: '上海市普陀区金沙江路 1518 弄'
                //     "je": '储值卡金额',
                //     "name": "姓名",
                //     "phone": "手机号",
                //     "hyId": "会员ID",
                //     "accountId": '账户ID',
                //     "cardUnitId": '发卡机构ID'
                // }, 
            ],
            currentRow: null,
            offset: 0,
            limit: 20,
            count: 0,
            currentPage: 1,
        }
    },
    components: {
        headTop,
    },
    created () {
        this.initData();
    },
    methods: {
        async initData () {
            try {
                this.getAllAccountPage(1);
            } catch (err) {
                console.log('获取数据失败', err);
            }
        },
        dialogFn (e) {
            console.log('e', e.hyId);
            this.formDialog.customerNo = e.hyId;
            this.formDialog.pageNum = 1;

            this.getTradeInfoList(1)
            this.dialogVisible = true
        },
        handleClose (done) {
            done();
            // this.$confirm('确认关闭？')
            //     .then(_ => {
            //         done();
            //     })
            //     .catch(_ => { });
        },
        handleSizeChange (val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange (val) {
            console.log(val);

            this.currentPage = val;
            this.offset = (val - 1) * this.limit;
            this.getAllAccountPage(val)
        },
        handleSizeChangeDialog (val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChangeDialog (val) {
            console.log(val);

            this.currentPage = val;
            this.offset = (val - 1) * this.limit;
            this.getTradeInfoList(val)
        },
        async getUsers () {
            const Users = await getUserList({ offset: this.offset, limit: this.limit });
            this.tableData = [];
            Users.forEach(item => {
                const tableData = {};
                tableData.username = item.username;
                tableData.registe_time = item.registe_time;
                tableData.city = item.city;
                this.tableData.push(tableData);
            })
        },
        onSubmit () {
            console.log('ddd');

            this.getCustomers()
        },

        async getAllAccountPage (val) {
            const Users = await getAllAccountPage({
                // phone: this.form.phone,
                pageNum: val,
                pageSize: this.form.pageSize,
                token: getStore('token')
            });
            console.log('users', Users);
            this.tableData = []
            if (Users.retcode == '00') {
                this.form.totalPage = Users.data.totalPage
                this.form.totalCount = Users.data.totalCount
                console.log(this.form.totalPage);

                Users.data.list.forEach(item => {
                    item.cardUnitId = this.unitArr[item.cardUnitId]
                    item.statusText = this.statusArr[item.status]
                    this.tableData.push(item)
                })
                // this.tableData = Users.data;
            } else {

            }

        },
        async getCustomers () {
            const Users = await getCustomers({
                phone: this.form.phone,
                cardUnitId: this.form.cardUnitId,
                token: getStore('token')
            });
            if (Users.retcode == '00') {
                this.tableData = []
                Users.data.forEach(item => {
                    item.cardUnitId = this.unitArr[item.cardUnitId]
                    this.tableData.push(item)
                })
                // this.tableData = Users.data;
            } else {

            }
        },
        async getTradeInfoList (val) {



            // return;
            const Users = await getTradeInfoList({
                // phone: this.form.phone,
                customerNo: this.formDialog.customerNo,
                pageNum: val,
                pageSize: this.formDialog.pageSize,
                token: getStore('token')
            });
            console.log('users', Users);
            this.tableDataDialog = []
            if (Users.retcode == '00') {
                this.formDialog.totalPage = Users.data.totalPage
                this.formDialog.totalCount = Users.data.totalCount

                Users.data.tradeInfos.forEach(item => {
                    this.tableDataDialog.push(item)
                })
                // this.tableData = Users.data;
            } else {

            }

        },
        frozenClick (row,e) {
            console.log('e', e);
            console.log('frozenClick', row);
            e.preventDefault();
            this.$confirm('此操作将'+ this.czlxArr[row.status] +', 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                this.repair(row);//提交方法


            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });


        },
    },
}
</script>

<style lang="less">
@import "../style/mixin";
.table_container {
    padding: 20px;
}
</style>


<style >
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 100px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>